<template>
	<view class="page">
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="noHandler"  title="心理测评">
				<view slot="left"></view>
				<view slot="center" class="navTitle">
					心理测评 
				</view>
			</u-navbar>
		</view>
		
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView pt30" @scrolltolower="loadMore">
				<div class="banner pd30" v-if="banner&&banner.length>0">
					<div class="banIn">
						<swiper :circular="true" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#ff6e1f">
							<swiper-item v-for="(ban,index) in banner" :key="index">
								<image :src="ban.picUrl" mode="aspectFill"></image>
							</swiper-item>
						</swiper>
					</div>
				</div>
				<view class="cepingList pd30" v-if="list&&list.length>0">
					<view class="ceping" v-for="task in list" @tap="goTest(task.id)">
						<view class="bg">
							<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/boxbg2.png" mode="aspectFill"></image>
						</view>
						<view class="tit">
							<view class="tl">
								<view class="t">
									{{task.name}}
								</view>
								<view class="p">
									截止日期 {{task.endTimeFormat}}
								</view>
							</view>
							<view class="tr">
								{{task.evaluationStatus?'已完成':'待完成'}}
							</view>
						</view>
						<view class="txt">
							<view class="xtit">
								<view class="xt">
									项目进度
								</view>
								<view class="num">
									<text class="cur">{{task.finishCount}}</text>
									<text>/</text>
									<text>{{task.totalCount}}</text>
								</view>
							</view>
							
							<view class="xp">
								<u-line-progress height="10rpx" inactiveColor="#ffffff" activeColor="#fe9c29" :percentage="task.finishCount/task.totalCount*100" :showText="false"></u-line-progress>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore fontSize="24rpx" :status="list.length<total?(isLoading?'loading':'loadmore'):'nomore'" />
			</scroll-view>
		</view>
		<view class="flex0">
			<TabBar :active="1" :type="utype"></TabBar>
		</view>
	</view>
</template>

<script>
	export default {
		onShow:function(){},
		data() {
			return {
				orderNums:['一','二','三','四','五','六','七','八','九','十'],
				info:{},
				list:[],
				pageSize:4,
				total:1,
				banner:[],
				pageIndex:1,
				isLoading:false
			}
		},
		methods: {
			// 获取banner
			getBanner() {
				this.$api.adList({
					position:13
				}, res => {
					if (res.code == 200) {
						this.banner = res.data;
						console.log(this.banner, 123141)
					}
				})
			},
			goTest(id){
				uni.navigateTo({
					url:'/subpage/test/detail?id='+id
				});
			},
			
			initData() {
				this.pageIndex = 1
				this.list = []
				this.getList()
			},
			getList() {
				if (this.isLoading) {
					return;
				};
				this.isLoading = true;
				let post = {
					pageNo: this.pageIndex,
				}
				this.$api.evaluationtask(post, res => {
					if (res.code == 200) {
						let _list = res.data.list;
						this.list = [...this.list,..._list]
						this.total = res.data.total
						this.isLoading = false;
					}
				})
			},
			
			loadMore(){
				var that=this;
				if(that.list.length<that.total&&!that.isLoading){
					that.pageIndex++;
					that.getList();
				}
			}
		},
		mounted(){
			this.initData();
			this.getBanner()
		}
	}
</script>

<style lang="scss" scoped>
	.banner{
		margin-bottom: 20rpx;
		.banIn{
			padding-bottom: 46.38%;
			position: relative;
			swiper{
				width: 100%;
				height: 100%;
				border-radius: 30rpx;
				overflow: hidden;
				position: absolute;
				left: 0;
				top: 0;
				image{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.cepingList{
		.ceping{
			padding-bottom: 30rpx;
			.tit{
				margin-bottom: 30rpx;
				.tr{
					flex: 0 0 auto;
					width: 120rpx;
					text-align: center;
					line-height: 60rpx;
					font-size: 24rpx;
					background: #ffe8cc;
					color: #fe9c29;
					border-radius: 60rpx;
				}
			}
			.txt{
				background: #fff4e6;
				padding: 25rpx;
				border-radius: 20rpx;
			}
		}
	}
</style>
